<?php

#################################################################
#								HTML
#################################################################

/**
 * Radio component registed as 'element/radio' 
 * 
 * $vars['name']
 * $vars['id']
 * $vars['class']
 * $vars['value']
 * $vars['checked']
 * $vars['label']
 * $vars['onClick']
 */

if($_CONTEXT=='HTML'){

	$_CSS_STACK->push(blg_get_site_url().'element/radio.css', TRUE);
	$_JS_STACK->push(blg_get_site_url().'element/radio.js', TRUE);

	//PREPARE DEFAULTS		
	if(empty($vars['id']))
		$vars['id']= 'radio_'.random_string(12);
		
	if(!is_bool($vars['checked']))
		$vars['checked']= FALSE;	

	if(empty($vars['value']))
		$vars['value']= '';
		
	$vars['label']= trim($vars['label']);

	$class= 'blg_radio';
		
	//BUILD	
	$radio = '<div class="blg_radio_container '.($vars['checked']?'blg_radio_checked':'blg_radio_unchecked').'" referer="'.$vars['id'].'">';
	
	$radio.= '<input type="radio" id="'.$vars['id'].'" blg_id="'.$vars['id'].'" value="'.$vars['value'].'"';
	
	if(!empty($vars['class']))
		$radio.= ' class="'.$class.' '.$vars['class'].'"';
	else
		$radio.= ' class="'.$class.'"';	
		
	if(!empty($vars['name']))
		$radio.= ' name="'.$vars['name'].'"';
		
	if($vars['checked']===TRUE)
		$radio.= ' checked="checked"';		
		
	$radio.= ' /><img class="blg_radio_img" src="'.blg_get_site_url().'_graphics/default/structure/pixel.png"></div>';
	
	if(!empty($vars['label']))
		$radio.= '<span class="blg_radio_label" type="radio" referer="'.$vars['id'].'">'.$vars['label'].'</span>';
	
	echo $radio;
	
	/****************** APPEND JS CODE ********************/
	
	if(!empty($vars['onClick'])){
		$code="
			$('#".$vars['id']."').bind('click', function(){
				".add_trainling_slash($vars['onClick'], ';')."
			});
		";

		$_JS_CODE->append($code, ON_DOC_READY);
	}	
}
#################################################################
#								JS
#################################################################
elseif($_CONTEXT=='JS'){ ?>

function blg_print_radio_img(radio){
	collection_name= radio.attr('name');
	
	$('input:radio[name='+collection_name+']').parent('.blg_radio_container').removeClass('blg_radio_checked');
	$('input:radio[name='+collection_name+']').parent('.blg_radio_container').addClass('blg_radio_unchecked');
	
	radio.parent('.blg_radio_container').addClass('blg_radio_checked');
	radio.parent('.blg_radio_container').removeClass('blg_radio_unchecked');
}

$(document).ready(function(){
	$('input:radio.blg_radio').click(function(){
		blg_print_radio_img($(this));	
	});

	$('span[type=radio]').click(function(){
		id= $(this).attr('referer');
		$('#'+id).click();
	});
	
	$('img.blg_radio_img').click(function(){
		id= $(this).parent('div.blg_radio_container').attr('referer');
		$('#'+id).click();
	});	
	
	$('input.blg_radio').css('position', 'absolute');
	$('input.blg_radio').css('top', '-9999px');
	$('input.blg_radio').css('left', '-9999px');	
});

<?php }
#################################################################
#								CSS
#################################################################
elseif($_CONTEXT=='CSS'){ ?>

div.blg_radio_container{
	border: 0px solid red;
	display: inline;
	width: 19px;
	height: 19px;
	cursor: pointer;
}

div.blg_radio_unchecked{
	background-image: url('<?php echo blg_get_site_url()?>_graphics/default/icons/radio.png');
	background-position: 0 -3px;
}
div.blg_radio_unchecked:hover{
	background-image: url('<?php echo blg_get_site_url()?>_graphics/default/icons/radio.png');
	background-position: 0 -28px;
}
div.blg_radio_checked{
	background-image: url('<?php echo blg_get_site_url()?>_graphics/default/icons/radio.png');
	background-position: 0 -53px;
}
div.blg_radio_checked:hover{
	background-image: url('<?php echo blg_get_site_url()?>_graphics/default/icons/radio.png');
	background-position: 0 -78px;
}

img.blg_radio_img{
	width: 19px;
	height: 19px;
}

input.blg_radio{
	border: 0px;
}

span.blg_radio_label{
	cursor: pointer;
	font-size: 12px;
	padding: 0 0 0 1px;
	position: relative;
	top: -2px;
}

<?php }
